const merge = require('webpack-merge');
const webpack = require('webpack');
const baseWebpackConfig = require('./webpack.base.conf');

const webpackConfig = merge(baseWebpackConfig, {
  //environment specific config goes here
  mode: 'development',
  output: {
    filename: '[name].js',
    chunkFilename: '[name].js'
  },
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './distribution',
    inline: true,//do not use iframe for the page, true is default
    open: true,//open browser after dev server starts
    port: 5000,//8080 is default
    proxy: {//proxy backend api
      '/api': {
        target: 'http://127.0.0.1:3000',
        changeOrigin: true,
        secure: false,
        pathRewrite: {
          '^/api': ''
        }
      }
    },
    hot: true
  },
  module: {
    rules: [
        {
            test: /\.(le|c)ss$/,
            use: [
                // 'vue-style-loader',
                'style-loader',
                'css-loader',
                "less-loader"
            ]
          }
    ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
  ]

});

module.exports = webpackConfig;
